import React, { useState, useEffect } from 'react';
import { Radio, Spin, Select, Button } from 'antd';

import style from '../report.css';
import IndexStyle from '@/pages/IndexPage.css';
import ColdPrice from '@/pages/global_monitor/data_board/components/ChartCardList/ColdPrice';
import SaveBarChart from '@/pages/analyze_manage/components/SaveBarChart';
import CustomCalendar from '@/components/CustomCalendar';
import Img1 from '../../../../../public/save-icon-1.png';
import Img2 from '../../../../../public/save-icon-2.png';
import Img3 from '../../../../../public/save-icon-3.png';
import Img4 from '../../../../../public/save-icon-4.png';
import Img5 from '../../../../../public/save-icon-5.png';
import moment from 'moment';


let infoList = [
    { title:'当月用电量', value:30, unit:'万kwh', bg:Img1 }, 
    { title:'当月电费', value:20, unit:'万元', bg:Img2 }, 
    { title:'节省电量', value:6, unit:'万kwh', bg:Img4 },
    { title:'节能率', value:10.21, unit:'%', bg:Img5 }
]

const { Option } = Select;


function PageItem2({ dispatch, title, companyName, energy, cost, fields, baseCost, startDate }){
    const [showType, setShowType] = useState('cost'); 

    return (
        <div className={style['page-container']} >
            <div className={style['page-title']}>
                <div className={style['page-title-content']}>{ title }</div>
                <div className={style['page-title-symbol']}></div>
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', height:'90px', margin:'1rem 0' }}>
                {
                    infoList.map((item, index)=>(
                        <div key={index} style={{
                            height:'100%',
                            width:'calc( (100% - 3rem)/4 )',
                            borderRadius:'6px',
                            display:'flex',
                            flexDirection:'column',
                            justifyContent:'center',
                            paddingLeft:'1rem',
                            backgroundImage:`url(${item.bg})`,
                            backgroundRepeat:'no-repeat',
                            backgroundSize:'cover',
                            backgroundPosition:'50% 50%'
                        }}>
                            <div style={{ color:'#000' }}>
                                <span style={{ fontSize:'2rem' }}>{ item.value }</span>
                                <span style={{ fontSize:'1rem' }}>{ item.unit }</span>
                            </div>
                            <div>{ item.title }</div>
                        </div>
                    ))
                }
            </div>
            <div className={IndexStyle['card-container']} style={{ overflow:'hidden', height:'630px',  marginBottom:'1rem', border:'1px solid #eaeaea' }}>
                <div className={IndexStyle['card-title']}>
                    <div>能耗日历</div>
                </div>
                <div className={IndexStyle['card-content']} style={{ paddingTop:'0' }}>
                    <div style={{ margin:'0.5rem', fontSize:'1rem', color:'rgba(0, 0, 0, 0.65)' }}>
                        <span>月总成本</span>
                        <span style={{ margin:'0 6px', fontSize:'1.6rem', fontWeight:'bold', color:'#000' }}>432,432</span>
                        <span>元 / </span>
                        <span>600,000 元</span>
                    </div>
                    <CustomCalendar 
                        currentDate={moment(new Date())}
                        mode='month'
                        forReport={true}
                        onChangeDate={date=>setCurrentDate(date)}
                    />
                </div>
                
            </div>
            <div className={IndexStyle['card-container']} style={{ height:'300px', border:'1px solid #eaeaea' }}>
                <div className={IndexStyle['card-title']}>节能前后能耗对比</div>
                <div className={IndexStyle['card-content']}>
                    <SaveBarChart forReport={true} />
                </div>
            </div> 
        </div>
    )
}

export default PageItem2;